<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>
		<car-comment :topdata="list" :list="list.list"></car-comment>
		<view class="comment-box">
			<view class="comment-row">
				<view class="comment-item">
					<view class="title">评价星级</view>
					<view class="rate">
						<u-rate count="5" 
						v-model="post_data.score"
						size="28"
						inactiveIcon="star-fill"
						activeColor="#FFC700"
						inactiveColor="#D8D8DE"
						></u-rate>
					</view>
				</view>
			</view>
			<view class="comment-row">
				<view class="comment-item label-tag">
					<view class="tag-item" v-for="(item, index) in comment_label" :key="index">
						<u-tag :text="item.name" :plain="!item.checked" type="primary" :name="index" shape="circle"
							@click="checkboxClick">
						</u-tag>
					</view>
				</view>
				<view class="comment-item">
					<view class="title">评价内容</view>
					<view class="content">
						<textarea  class="text" v-model="post_data.content" placeholder="本次租车的体验怎么样?"></textarea>
					</view>
				</view>
				<view class="comment-item">
					<view class="title">图片上传</view>
					<view class="upload-box">
						<my-u-upload
							:fileList="file_list1"
							@afterRead="afterRead"
							@delete="deletePic"
							multiple
							name="1"
							width="100"
							height="100"
							:maxCount="20"
							:previewFullImage="true"
						></my-u-upload>
					</view>
				</view>
			</view>
			<view class="comment-btn">
				<button class="my-but-primary" text="" @click="submit()">确定提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import $file from "@/common/file"
	import checkLogin from '@/mixins/loginCheck.js'
	export default {
		mixins:[checkLogin],
		data() {
			return {
				nav_title:'订单评价',
				file_list1:[],
				comment_label:[],
				list:[],
				post_data:{
					order_id:0,
					car_id:0,
					content:"",
					images:'',
					label:'',
					score:0,
				}
			}
		},
		onLoad(option){
			if(option.id!=null || option.cid!=null){
				this.post_data.order_id=option.id
				this.post_data.car_id=option.cid
				this.initData()
			}else{
				this.$c.error('缺少参数','index/index')
			}
		},
		onShow(){
		},
		methods: {
			initData(){
				let than=this
				this.$u.api.commentConfig().then(res=>{
					let label=res.data.comment_label
					label.forEach(function(item,index,array){
						than.comment_label.push({
							name:item,
							checked:false
						})
					})
				})
				
				this.$u.api.commentList({car_id:this.post_data.car_id}).then(res=>{
					this.list=res.data
				})
			},
			//删除图片
			deletePic(event) {
				this[`file_list${event.name}`].splice(event.index, 1)
			},
			//上传图片
			async afterRead(event){
				this[`file_list${event.name}`]= await $file.multipleUpload(event,this[`file_list${event.name}`])
			},
			//提交订单
			submit(){
				if(this.post_data.score<=0){
					this.$c.error('请先选择星级')
					return false
				}
				
				this.labelString()
				
				let imgs=[]
				this.file_list1.map((item) => {
					imgs.push(item.path)
				})
				this.post_data.images=imgs.join(',')
				//上传凭证
				this.$u.api.commentAdd(this.post_data).then(res=>{
					this.$c.success('提交成功！','order/detail/index?id='+this.post_data.order_id)
				})
			},
			// 点击标签
			checkboxClick(name) {
				this.comment_label[name].checked = !this.comment_label[name].checked
			},
			// 合并标签数组
			labelString(){
				let label_arr=[]
				this.comment_label.forEach(function(item,index,array){
					if(item.checked){
						label_arr.push(item.name)
					}
				})
				this.post_data.label=label_arr.join(',')
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $u-bg-color;
	}
	.comment-box{
		font-size: 26rpx;
	}
	.comment-row{
		padding: 30rpx;
		position: relative;
		margin-bottom: 20rpx;
		overflow: hidden;
		background-color: #fff;
	}
	.comment-row .upload-box{
		margin: 30rpx auto;
	}
	.comment-item .content .text{
		font-size:26rpx;
		height: 300rpx;
		width: 100%;
	}
	.comment-item .title{
		margin: 20rpx auto;
	}
	.comment-item .upload-box{
		margin-bottom: 0rpx;
	}
	.comment-row .label-tag{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		margin: 20rpx auto 40rpx auto;
	}
	.comment-row .label-tag .tag-item{
		margin-right: 10rpx;
	}
	.comment-btn{
		padding: 20rpx 30rpx;
	}
</style>
